<template>
  <div class="box">
    <!-- 导航栏 -->
    <van-nav-bar title="用户登录" @click-left="$router.push('/films/nowplaying')">
      <template #left>
        <van-icon name="wap-home-o" size="20" />
        <span>首页</span>
      </template>
    </van-nav-bar>
    <!-- 表单区域 -->
    <div class="login">
      <van-form @submit="onSubmit" class="login-form" :show-error-message="true" :show-error="false">
        <van-field
          v-model="username"
          name="username"
          label="手机号"
          placeholder="手机号"
          :rules="rulesData('username')"
        />
        <van-field
          v-model="password"
          name="password"
          label="验证码"
          placeholder="验证码"
          :rules="rulesData('password')"
        >
          <template #button>
            <!-- <van-button size="small" native-type="button" type="primary">发送验证码</van-button> -->
            <van-tag v-if="!sendMsgStauts" type="primary" @click="sendTelMsg">发送验证码</van-tag>
            <van-count-down v-if="sendMsgStauts" :time="time" format="ss秒" @finish="finish" />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button class="form-login-button" round block type="info" native-type="submit">用户登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  // data中的数据会劫持
  data() {
    return {
      username: '13252323231',
      password: '',
      // time: 120 * 1000,
      time: 5 * 1000,
      sendMsgStauts: false,
    }
  },
  methods: {
    // 表单提交
    async onSubmit() {
      await this.$store.dispatch('loginAction', this.$data)
      // 到此处认为，登录成功，跳转到个人中心
      this.$router.push('/center')
    },
    // 倒计时结束时触发
    finish() {
      this.sendMsgStauts = false
    },
    // 发送短信
    sendTelMsg() {
      // 修改点击按钮显示，为了防用户误操作,防抖
      this.sendMsgStauts = true
      // 发送ajax请求给后端，后端会调用发送短信平台api给用户的手机号发送对应的短信，然后用户会对应手机上的短信信息来填写对应的验证码
      console.log('【千锋教育】您的登录验证码为： 12')
    },
    rulesData(key = null) {
      let rules = {
        username: [
          { required: true, message: '手机号不能为空' },
          // {pattern:/^1[3-9]\d{9}$/,message:'手机号码不合法'}
          {
            validator: (value, rule) => {
              // 在此函数中可以写任何的数据的判断
              return /^1[3-9]\d{9}$/.test(value.trim())
              // return Promise.reject('失败了')
            },
            message: '手机号码不合法',
          },
        ],
        password: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{2}$/, message: '验证码不合法' },
        ],
      }
      return key ? rules[key] : rules
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  /* background: #f4f4f4; */
  /* height: 100vh; */
  .login {
    height: calc(100vh - 46px);
    display: flex;
    justify-content: center;
    margin-top: 90px;
    .login-form {
      width: 100vw;
    }
    .form-login-button {
      border-radius: 10px;
      background-color: #ff5f16;
      border: 1px solid #ff5f16;
    }
  }
}
</style>